<template>
  <div id="order-query-wrapper">
    <div class="content">
      <div class="form">
        <el-form :model="form" label-width="auto" style="width: 1600px; height: 300px;">
          <el-row class="first">
            <el-col :span="6">
              <el-form-item label="订单编号" class="bold-label" label-width="150px">
                <el-input v-model="form.ordNo" style="width: 200px"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="订单名称" class="bold-label" label-width="150px">
                <el-input v-model="form.ordName" style="width: 200px"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="订单状态" class="bold-label" label-width="150px">
                <el-input v-model="form.ordState" style="width: 200px"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="订单类型" class="bold-label" label-width="150px">
                <el-input v-model="form.agreeNo" style="width: 200px"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="first">
            <el-col :span="6">
              <el-form-item label="商家编号" class="bold-label" label-width="150px">
                <el-input v-model="form.busNo" style="width: 200px"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="商家名称" class="bold-label" label-width="150px">
                <el-input v-model="form.busName" style="width: 200px"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="发电户号" class="bold-label" label-width="150px">
                <el-input v-model="form.genConsNo" style="width: 200px"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="发电户名" class="bold-label" label-width="150px">
                <el-input v-model="form.genConsName" style="width: 200px"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="first">
            <el-col :span="6">
              <el-form-item label="客户编号" class="bold-label" label-width="150px">
                <el-input v-model="form.cusNo" style="width: 200px"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="客户名称" class="bold-label" label-width="150px">
                <el-input v-model="form.cusName" style="width: 200px"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="合同编号" class="bold-label" label-width="150px">
                <el-input v-model="form.ctrtNo" style="width: 200px"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="合同名称" class="bold-label" label-width="150px">
                <el-input v-model="form.ctrtName" style="width: 200px"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="first">
            <el-col :span="6">
              <el-form-item label="站点名称" class="bold-label" label-width="150px">
                <el-input v-model="form.siteName" style="width: 200px"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="计费标准" class="bold-label" label-width="150px">
                <el-input v-model="form.standName" style="width: 200px"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="缴费方式" class="bold-label" label-width="150px">
                <el-input v-model="form.payWay" style="width: 200px"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="订单类型" class="bold-label" label-width="150px">
                <el-input v-model="form.orderType" style="width: 200px"/>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="first">
            <el-col :span="6">
              <el-form-item label="创建人" class="bold-label" label-width="150px">
                <el-input v-model="form.createUserName" style="width: 200px"/>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="创建时间" label-width="150px">
                <el-col :span="11" class="align-items-center">
                  <el-date-picker v-model="form.startTime" type="date" placeholder="开始日期" />
                </el-col>
                <el-col :span="2" class="text-center center">
                  <span class="text-gray-500">-</span>
                </el-col>
                <el-col :span="11">
                  <el-date-picker v-model="form.endTime" type="date" placeholder="结束日期" />
                </el-col>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row class="first">
            <el-col :span="2" :offset="20">
              <el-button type="primary" @click="onSubmit">查询</el-button>
              <el-button type="primary" @click="onReset">重置</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="table">
        <el-table :data="tableData" style="width: 1600px; height: 80%" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
          <el-table-column prop="ordNo" label="订单编号" width="150"/>
          <el-table-column prop="ordName" label="订单名称" width="150"/>
          <el-table-column prop="ordState" label="订单状态" width="150" />
          <el-table-column prop="agreeNo" label="订单类型" width="150" />
          <el-table-column prop="busNo" label="商家编号" width="150" />
          <el-table-column prop="busName" label="商家名称" width="150" />
          <el-table-column prop="ordNo" label="发电户号" width="150"/>
          <el-table-column prop="cusNo" label="发电户名" width="150"/>
          <el-table-column prop="cusName" label="客户名称" width="150" />
          <el-table-column prop="ctrtNo" label="合同编号" width="150" />
          <el-table-column prop="ctrtName" label="合同名称" width="150" />
          <el-table-column prop="siteName" label="站点名称" width="150" />
          <el-table-column prop="standName" label="计费标准" width="150"/>
          <el-table-column prop="payWay" label="缴费方式" width="150" />
          <el-table-column prop="orderType" label="订单类型" width="150" />
          <el-table-column prop="createUserName" label="创建人" width="150" />
          <el-table-column prop="startTime" label="开始日期" width="150" />
          <el-table-column prop="endTime" label="结束日期" width="150" />
          <el-table-column fixed="right" label="操作" min-width="150">
            <template #default>
              <el-button link type="primary" size="small" @click="handleClick">
                查看详情
              </el-button>
              <el-button link type="primary" size="small">编辑</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { reactive } from 'vue'

const form = reactive({
  ordNo: '', // 订单编号
  ordName: '', // 订单名称
  ordState: '', // 订单状态
  agreeNo: '', // 协议编号
  busNo: '', // 商家编号
  busName: '', // 商家名称
  genConsNo: '', // 发电户号
  genConsName: '', // 发电户名
  cusNo: '', // 客户编号
  cusName: '', // 客户名称
  ctrtNo: '', // 合同编号
  ctrtName: '', // 合同名称
  siteName: '', // 站点名称
  standName: '', // 计费标准
  payWay: '', // 缴费方式
  orderType: '', // 订单类型
  createUserName: '', // 创建人
  startTime: '', // 创建时间最小
  endTime: '', // 创建时间最大
})
const handleClick = () => {
  console.log('click')
}

const tableData = [
  {
    ordNo: 'ORD20230001',
    ordName: '居民光伏发电订单',
    ordState: '已完成',
    agreeNo: 'AGR20230001',
    busNo: 'BUS001',
    busName: '阳光电力科技有限公司',
    genConsNo: 'GC20230001',
    genConsName: '张三',
    cusNo: 'CUS001',
    cusName: '张三',
    ctrtNo: 'CT20230001',
    ctrtName: '居民光伏发电购电合同',
    siteName: '幸福花园1号楼3单元',
    standName: '居民用电标准',
    payWay: '支付宝自动缴费',
    orderType: '购电',
    createUserName: '系统管理员',
    startTime: '2023-01-15 08:30:00',
    endTime: '2023-01-15 18:45:00'
  },
  {
    ordNo: 'ORD20230002',
    ordName: '企业储能系统订单',
    ordState: '处理中',
    agreeNo: 'AGR20230002',
    busNo: 'BUS002',
    busName: '绿能科技有限公司',
    genConsNo: 'GC20230002',
    genConsName: '李四',
    cusNo: 'CUS002',
    cusName: '某制造企业',
    ctrtNo: 'CT20230002',
    ctrtName: '企业储能系统采购合同',
    siteName: '工业园区A区5号厂房',
    standName: '工业用电标准',
    payWay: '银行转账',
    orderType: '采购',
    createUserName: '业务代表小王',
    startTime: '2023-02-20 10:15:00',
    endTime: '2023-02-20 16:30:00'
  },
  {
    ordNo: 'ORD20230003',
    ordName: '商业光伏并网订单',
    ordState: '已取消',
    agreeNo: 'AGR20230003',
    busNo: 'BUS003',
    busName: '新能源开发有限公司',
    genConsNo: 'GC20230003',
    genConsName: '王五',
    cusNo: 'CUS003',
    cusName: '某购物中心',
    ctrtNo: 'CT20230003',
    ctrtName: '商业光伏并网协议',
    siteName: '商业中心楼顶',
    standName: '商业用电标准',
    payWay: '银行承兑汇票',
    orderType: '并网',
    createUserName: '客户经理小李',
    startTime: '2023-03-05 09:20:00',
    endTime: '2023-03-05 15:10:00'
  },
  {
    ordNo: 'ORD20230004',
    ordName: '农业光伏灌溉订单',
    ordState: '已完成',
    agreeNo: 'AGR20230004',
    busNo: 'BUS004',
    busName: '农光互补科技有限公司',
    genConsNo: 'GC20230004',
    genConsName: '赵六',
    cusNo: 'CUS004',
    cusName: '某农业合作社',
    ctrtNo: 'CT20230004',
    ctrtName: '农业光伏灌溉服务合同',
    siteName: '现代农业示范区',
    standName: '农业用电标准',
    payWay: '政府补贴+自筹',
    orderType: '服务',
    createUserName: '区域经理小张',
    startTime: '2023-04-12 13:45:00',
    endTime: '2023-04-12 19:20:00'
  },
  {
    ordNo: 'ORD20230005',
    ordName: '光伏设备维修订单',
    ordState: '待处理',
    agreeNo: 'AGR20230005',
    busNo: 'BUS005',
    busName: '光伏运维服务有限公司',
    genConsNo: 'GC20230005',
    genConsName: '孙七',
    cusNo: 'CUS005',
    cusName: '某社区物业',
    ctrtNo: 'CT20230005',
    ctrtName: '光伏设备维护合同',
    siteName: '和谐社区公共区域',
    standName: '维保服务标准',
    payWay: '月结',
    orderType: '维修',
    createUserName: '运维调度员',
    startTime: '2023-05-28 11:30:00',
    endTime: '2023-05-28 17:50:00'
  }
];

const onSubmit = () => {
  console.log('submit!')
}
const onReset = () => {
  console.log('submit!')
}
</script>
<style lang="scss" scoped>
#order-query-wrapper{
  display: flex;
  justify-content: center; /* 水平方向居中 */
  align-items: center;     /* 垂直方向居中 */
  width: 100%;
  height: 100%;
  overflow-y: hidden;
  background-color: lightcoral;

  .content{
    display: flex;
    flex-direction: column;
    justify-content: center; /* 水平方向居中 */
    align-items: center;     /* 垂直方向居中 */
    /* 比父容器宽小10px */
    width: calc(100% - 40px);
    /* 比父容器高小10px */
    height: calc(100% - 40px);
    background-color: #fff;
    border-radius: 30px;

    .form{
      display: flex;
      justify-content: center; /* 水平方向居中 */
      align-items: center;     /* 垂直方向居中 */
      width: 100%;
      height: 400px;
      background-color: bisque;
      border-radius: 30px;
      margin-bottom: 30px;
    }
    .table{
      display: flex;
      justify-content: center; /* 水平方向居中 */
      align-items: center; 
      width: 100%;
      height: 400px;
      background-color: lightblue;
      border-radius: 30px;
    }
  }
}


</style>